<sqx-title message="i18n:rules.ruleSimulator.listPageTitle" />
<sqx-layout hideSidebar="true" layout="main" titleText="i18n:rules.simulator" width="50">
    <ng-container menu>
        <button class="btn btn-text-secondary" (click)="simulate()" title="i18n:rules.simulateTooltip" type="button">
            <i class="icon-play-line"></i> {{ "rules.simulate" | sqxTranslate }}
        </button>
    </ng-container>
    <ng-container>
        <sqx-list-view [isLoading]="ruleSimulatorState.isLoading | async" table="true">
            <table class="table table-items table-fixed">
                <thead>
                    <tr>
                        <th class="cell-label">
                            <span class="truncate">{{ "common.status" | sqxTranslate }}</span>
                        </th>

                        <th class="cell-40">
                            <span class="truncate">{{ "common.event" | sqxTranslate }}</span>
                        </th>

                        <th class="cell-40">
                            <span class="truncate">{{ "common.skipped" | sqxTranslate }}</span>
                        </th>

                        <th class="cell-actions">&nbsp;</th>
                    </tr>
                </thead>

                @for (event of ruleSimulatorState.simulatedRuleEvents | async; track event.uniqueId) {
                    <tbody
                        [availableSteps]="availableSteps"
                        [expanded]="event.uniqueId === selectedRuleEvent"
                        (expandedChange)="selectEvent(event)"
                        [sqxSimulatedRuleEvent]="event"></tbody>
                }
            </table>
        </sqx-list-view>
    </ng-container>
</sqx-layout>
